<template>
  <div class="home-one">
    <div class="home">
      <h1 v-show="flag">
        欢迎来到 梦的 世界!!!
        <br />
        请打开你要进入的梦境<br />
        请从九道大门做出选择,你别无退路 梦境之旅及其凶险<br />
        加油吧骚年!!!!!!!!
      </h1>
    </div>
    <div v-show="DreamGatefalg" class="DreamGate" @click="gogo($event)">
           <div >
        <i>魍魉之门</i>
        <div class="Door" >
          <div></div>
        </div>
      </div>
           <div >
        <i>未来之门</i>
        <div class="Door" >
          <div></div>
        </div>
      </div>
           <div >
        <i>过去之门</i>
        <div class="Door" >
          <div></div>
        </div>
      </div>
      <div >
        <i>四季之门</i>
        <div class="Door" >
          <div></div>
        </div>
      </div>
      <div >
        <i>五行之门</i>
        <div class="Door" >
          <div></div>
        </div>
      </div>
     <div >
        <i>轮回之门</i>
        <div class="Door">
          <div></div>
        </div>
      </div>
       <div >
        <i>宿命之门</i>
        <div class="Door" >
          <div></div>
        </div>
      </div>
         <div >
        <i>生殇之门</i>
        <div class="Door" >
          <div></div>
        </div>
      </div>
          <div >
        <i>道德之门</i>
        <div class="Door" >
          <div></div>
        </div>
      </div>
           <div >
        <i>贫贱之门</i>
        <div class="Door" >
          <div></div>
        </div>
      </div>
           <div >
        <i>九转之门</i>
        <div class="Door" >
          <div></div>
        </div>
      </div>
           <div >
        <i>琳琅之门</i>
        <div class="Door">
          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "hoMe",
  data() {
    return {
      flag: false,
      DreamGatefalg: false,
    };
  },
  mounted() {
    setTimeout(() => {
      this.flag = true;
    }, 1000);
    setTimeout(() => {
      this.DreamGatefalg = true;
    }, 1000);
  },
  methods: {
    gogo(event) {
      if (event.path[1].children[0].innerText) {
        let Gate =  event.path[1].children[0].innerText
        setTimeout(()=>{
          this.$router.push({
            path:"/fourSeasons",
            query:{
              name:Gate
            }
          });
        },3000)
        
      }
    },
  },
};
</script>

<style lang="less" >
.home-one {
  height: 100%;
  position: relative;
  .home {
    background-color: rgba(165, 180, 180, 0.5);
    width: 80%;
    height: 4rem;
    margin: auto;
    margin-top: 0.2rem;
    border: 0.1rem solid rgba(123, 127, 148, 0.8);
    font-size: 0.2rem;
    color: rgb(134, 10, 35);
  }
  .DreamGate {
    display: flex;
    flex-wrap: wrap;
    div {
      margin: 0.45rem;
      margin-top: 0.2rem;
      border: 0.1rem solid #000000;
      height: 3rem;
      background-color: #790c06;
      width: 2rem;
      font-size: 0.2rem;
      .Door {
        width: 80%;
        height: 70%;
        margin: auto;
        margin-top: 0.2rem;
        background-color: red;

        div {
          width: 0rem;
          height: 98%;
          border: 0.01rem solid rgb(0, 0, 0);
          margin: auto;
        }
        transition: all 3s;
      }
      .Door:hover {
        background-color: rgba(0, 0, 0);
      }
    }
    text-align: center;
    color: rgb(251, 1, 51);
  }
}
</style>>

